<template>
    <div class="news-content">
        <div class="l">
            <div class="title">新闻资讯</div>
            <a href="javascript:void(0)" class="news-highlight">
                <div class="name">联合入选！四部委公布《汽车生产者责任延伸试点企业名单》</div>
                <div class="detail">
                    天奇股份全资子公司江西天奇金泰阁钴业有限公司宁波市废旧汽车回收有限公司控股子公司吉林省白城市东利物资再生利用有限责任公司重要参股公司天奇欧瑞德广州汽车零部件再制造有限公司深圳深汕特别合作区乾泰技术有限公司以及其他5家企业，与主体单位中国第一汽车集团有限公司联合申报，成功入选...
                </div>
            </a>
            <el-divider />
            <a class="more" @click.prevent="" href="#">更多>></a>
            <div class="article-list">
                <div class="item" v-for="(item, index) in article_list" :key="item.id">
                    <a @click.prevent="" href="#" class="name">{{ item.name }}</a>
                    <div class="date">2022-10-25</div>
                    <el-divider />

                </div>
            </div>

        </div>
        <div class="r">
            <div class="block text-center">
                <el-carousel height="600px">
                    <el-carousel-item v-for="item in 4" :key="item">
                        <img src="/images/banner/test.jpg" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { reactive } from 'vue';


interface articleType {
    name: string,
    detail?: string,
    id: number
}

let article_list: articleType[] = reactive([
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 1
    },
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 2
    },
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 3
    },
    {
        name: '联合入选！四部委公布《汽车生产者责任延伸试点企业名单》',
        detail: 'saf',
        id: 4
    },
])

</script>

<style scoped lang='scss'>
.news-content {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 10%;
    display: flex;
    justify-content: space-between;

    .l {
        width: 48%;

        .title {
            line-height: 38px;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .news-highlight {

            .name {
                font-size: 20px;
                color: #1255a4;
                line-height: 33px;
            }

            .detail {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }
        .more{
            width: 100%;
            display: block;
            text-align: right;
        }

        .article-list {
            width: 100%;

            .item {
                width: 100%;
                font-size: 16px;

                .name {
                    color: #333;
                    width: 80%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }

                .date {
                    width: 100%;
                    text-align: right;
                    color: hsla(160, 100%, 37%, 1);
                }
            }
        }


    }

    .r {
        width: 50%;

        img {
            height: 100%;
        }
    }

    @media (max-width:1470px) {
        .l {
            width: 100%;

        }

        .r {
            width: 0;
        }
    }


}
</style>